<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../../css/public.css" media="all">
    <style>
        body {
            background-color: #ffffff;
        }
    </style>
</head>

<body>
<div class="layui-form layuimini-form">
    <div class="layui-form-item">
        <label class="layui-form-label">所属小区</label>
        <div class="layui-input-block">
            <select name="cname" lay-filter="cname" id="cname" lay-search="">
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">栋数</label>
        <div class="layui-input-block">
            <select name="bname" lay-filter="bname" id="bname" lay-search="">
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">房产编码</label>
        <div class="layui-input-block">
            <input type="text" name="propertyId" lay-verify="required" lay-reqtext="房产编码不能为空" placeholder="请输入房产编码"
                   value="" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">户主名称</label>
        <div class="layui-input-block">
            <select name="oname" lay-filter="oname" id="oname" lay-search="">
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">房间数</label>
        <div class="layui-input-block">
            <input type="text" name="count" lay-verify="required" lay-reqtext="房间数不能为空" placeholder="请输入房间数" value=""
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">单元</label>
        <div class="layui-input-block">
            <select name="unit" lay-filter="unit" id="unit" lay-search="">
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">房号</label>
        <div class="layui-input-block">
            <input type="text" name="houseNum" lay-verify="required" lay-reqtext="房号不能为空" placeholder="请输入房号" value=""
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">入住时间</label>
        <div class="layui-input-block">
            <input type="date" name="liveTime" lay-verify="required" lay-reqtext="入住时间不能为空" placeholder="请输入入住时间"
                   value="" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
        </div>
    </div>
</div>
<script src="../../layui-v2.6.3/layui.js" charset="utf-8"></script>
<script>
    layui.use(['form', 'jquery'], function () {
        var form = layui.form,
            layer = layui.layer,
            $ = layui.$;

        // 向后端发送请求，获取小区信息
        $.ajax({
            // url: "../../house/preAdd", // 相对路径的写法
            url: "/community_maven/community/queryAllCommunity", // 绝对路径的写法
            type: "post",
            data: "",
            dataType: "json",
            success: function (result) {
                // console.log(JSON.stringify(result))
                if (result.code === 0) {//成功
                    //遍历

                    var cnameOptionStr = "<option value='99'>请选择</option>";
                    $.each(result.data, function (index, item) {
                        cnameOptionStr += "<option value='" + item.cid + "'>" + item.cname + "</option>"
                    })


                    $("#cname").html(cnameOptionStr);

                    form.render('select');//渲染整个表单 只是渲染表单中的某个组件，我们这里渲染select

                } else {
                    layer.msg(result.msg);
                }
            }
        })

        // 获取房产信息
        // $.ajax({
        //     // url: "../../house/preAdd", // 相对路径的写法
        //     url: "/community_maven/house/list", // 绝对路径的写法
        //     type: "post",
        //     data: "",
        //     dataType: "json",
        //     success: function (result) {
        //         // console.log(JSON.stringify(result))
        //         // 获取需要动态插入值的表单
        //
        //         if (result.code === 0) {//成功
        //             //遍历
        //             $.each(result.data, function (index, item) {
        //                 // input[name='propertyId'].val(item.)
        //
        //             })
        //
        //
        //
        //
        //
        //             form.render('select');//渲染整个表单 只是渲染表单中的某个组件，我们这里渲染select
        //
        //         } else {
        //             layer.msg(result.msg);
        //         }
        //     }
        //
        // })

        // 获取业主名称进行渲染
        $.ajax({
            url: '../../owner/queryAllOwner',
            type: 'post',
            data: {

            },
            dataType: "json",
            success: function (result){
                if (result.code === 0){
                    //遍历
                    var ownerOptionStr = "<option value='99'>请选择</option>";
                    $.each(result.data, function (index, item) {
                        ownerOptionStr += "<option value='" + item.oid + "'>" + item.oname + "</option>"
                    })

                    $("#oname").html(ownerOptionStr);
                    form.render('select');//渲染整个表单 只是渲染表单中的某个组件，我们这里渲染select
                } else {
                    layer.msg(result.msg);
                }
            }
        })


        // "所属小区"下拉框发生变化的时候，发送ajax，查询当前”小区“的”栋数“
        var cid = null;
        var cname = null;
        form.on('select(cname)', function (data) {
            // 注意：Layui select onchange事件 正确使用教程
            // 获取参数
            cid = data.value; // 获取cname onchange事件 发生时候的 option的value值
            //获取选中的值
            var e = data.elem;
            //获取选中的文本
            cname =e[e.selectedIndex].text;
            $.ajax({
                url: '../../build/queryAllBuidByCommu',
                type: 'post',
                data: {
                    cid: cid,
                    cname: cname
                },
                dataType: "json",
                success: function (result){
                    // console.log(JSON.stringify(result));
                    if (result.code === 0) {//成功
                        //遍历

                        var buildOptionStr = "<option value='99'>请选择</option>";
                        $.each(result.data, function (index, item) {
                            buildOptionStr += "<option value='" + item.bid + "'>" + item.bname + "</option>"
                        })


                        $("#bname").html(buildOptionStr);

                        form.render('select');//渲染整个表单 只是渲染表单中的某个组件，我们这里渲染select

                    } else {
                        layer.msg(result.msg);
                    }
                }
            })
        })

        // "所属栋数"下拉框发生变化的时候，发送ajax，查询当前”栋数“的所有”单元“
        // var bid = null;
        var bname = null;
        form.on('select(bname)', function (data) {
            // 注意：Layui select onchange事件 正确使用教程
            // 获取参数
            let bid = data.value; // 获取cname onchange事件 发生时候的 option的value值
            console.log("bname框onchange时，bid==>" + bid);

            //获取选中的值
            // console.log(data.value)
            var e = data.elem;
            //获取选中的文本
             bname =e[e.selectedIndex].text;
            console.log("bname框onchange时，当前被选中的bname====>" + bname);
            $.ajax({
                url: '../../build/queryAllUnitByBuildAndComm',
                type: 'post',
                data: {
                    cid: cid,
                    // bid: bid,
                    bname: bname
                },
                dataType: "json",
                success: function (result){
                    // console.log(JSON.stringify(result));
                    if (result.code === 0) {//成功
                        //遍历

                        var unitOptionStr = "<option value='99'>请选择</option>";
                        $.each(result.data, function (index, item) {
                            unitOptionStr += "<option value='" + item.bid + "'>" + item.unit + "</option>"
                        })


                        $("#unit").html(unitOptionStr);

                        form.render('select');//渲染整个表单 只是渲染表单中的某个组件，我们这里渲染select

                    } else {
                        layer.msg(result.msg);
                    }
                }
            })
        })

        // 拿到业主的oid与oname
        var oid = null;
        var oname = null;
        form.on('select(oname)', function (data) {
            // 注意：Layui select onchange事件 正确使用教程
            // 获取参数
            oid = data.value; // 获取cname onchange事件 发生时候的 option的value值
            //获取选中的值
            // console.log(data.value)
            var e = data.elem;
            //获取选中的文本
            oname = e[e.selectedIndex].text;
            // console.log(text)
        })

        /* var oo = ['cname','bname','unit'];
         for(var j=0;j<oo.length;j++){
             form.on('select('+oo[j]+')', function (data) {
                 //因动态设置form.on事件，需通过uu.elem.id重新获取组件的ID,动态传值
                 // var vv = uu.elem.id; //获取给组件的id值
                 // var value = $('#'+vv).val();
                 // console.log(value +'============');
                 console.log(data.elem); // 得到select原始DOM对象
                 var currentSelector = data.elem;

                 if ('cname' === data.elem.getElementById("#cname")){
                     var vv = data.elem.id; //获取给组件的id值
                     var value = $('#'+vv).val();
                     console.log(value +'============');
                 }
             });
         }*/

        // 通过unit的onchange事件得到变化后的bid与unit
        var bid = null;
        var unit = null;
        form.on('select(unit)',function (data) {
            // 注意：Layui select onchange事件 正确使用教程
            // 获取参数
            bid = data.value; // 获取bid onchange事件 发生时候的 option的value值
            //获取选中的值
            console.log("unit框变化后对应的bid====>" + bid);
            var e = data.elem;
            //获取选中的文本
            unit = e[e.selectedIndex].text;
            console.log("unit框变化后对应的unit====>" + unit);
        })


        //监听提交
        form.on('submit(saveBtn)', function (data) {
            let cid = data.field.cname; // 小区号
            // console.log("小区名===>" + cname);
            // let bid = data.field.bname; // 栋号(由于bid，bname,unit来自于同一张表，所以当unit变化了，bname可以不变，但是bid一定发生了变化，不然插入进house表的就是错误的unit)
            // console.log("栋数===>" + bname);
            let propertyId = data.field.propertyId; //房产编号
            // console.log("房产编号===>" + propertyId);
            let oid= data.field.oname; // 户主号
            // console.log("户主名称===>" + oname);
            // let tel = data.field.tel; // 业主联系电话
            // console.log("业主联系电话==>" + tel);
            let count = data.field.count; // 房间数
            // console.log("房间数===>" + count);
            // let unit = data.field.unit; // 单元
            // console.log("单元===>" + unit);
            var houseNum = data.field.houseNum; // 房号
            // console.log("房号===>" + houseNum);
            let liveTime = data.field.liveTime; // 入住时间
            // console.log("入住时间===>" + liveTime)
            var house = {
                propertyId: propertyId,
                houseNum: houseNum,
                count: count,
                liveTime: liveTime,
                // 小区
                cid: cid,
                cname: cname,
                // 社区
                bid: bid,
                bname: bname,
                // 业主
                oid: oid,
                oname: oname,
                // 单元(新增功能需要另外写sql)
                unit: unit
            };
            console.log("house===>"+JSON.stringify(house))
            $.ajax({
                type:'post',
                url:'../../house/addHouse',
                // data: house,
                data: JSON.stringify(house),
                dataType:'json',
                success(obj){
                    if(obj.code === 0){//成功
                        window.parent.location.reload();
                    }else {
                        layer.msg(obj.msg)
                    }
                    var iframeIndex = parent.layer.getFrameIndex(window.name);
                    parent.layer.close(iframeIndex);
                }

            })

            return false;

        });


    });

</script>
</body>
</html>